<template>
	<view>
		<!-- <u-navbar back-icon-color="#fff" title-color="#fff" title="设置打卡" :border-bottom="false"></u-navbar> -->
		<view class="u-navbar">
			<view class="u-back-icon" @tap="goBack"><my-icon name="back" size="28upx"></my-icon></view>
			<view class="u-navbar-content-title">
				<view class="u-title u-line-1">设置打卡</view>
				<!-- <view class="srot" @click="goLink('setClock')"><image src="../../static/setTop.png"></image></view> -->
			</view>
		</view>
		<view class="clockCon">
			<view class="clockWarn">温馨提示：每天可以设置一次，随机10道题</view>
			<view class="clockTop">
				<view class="clockTopLi" @click="pickerChose">
					<text>选择时间</text>
					<view :class="[startTime == '选择时间' ? 'place' : '']">
						{{ startTime }}
						<my-icon name="bd-next"></my-icon>
					</view>
				</view>
				<view class="clockTopLi" @click="stuChose">
					<text>
						选择班级
						<text style="color: #FF0000;padding: 0 10upx;">*</text>
					</text>
					<view class="choseStuName" :class="[choseStu ? '' : 'place']">
						{{ choseStu }}
						<my-icon name="bd-next"></my-icon>
					</view>
				</view>
			</view>
			<u-tabs :list="list" style="background: none;" :is-scroll="true" :current="current" @change="change"></u-tabs>

			<template v-if="voList">
				<my-empty v-if="emptyFlase" emptyTit="暂无数据"></my-empty>
				<view class="clockList" hover-class="hoverBg" v-for="(item, index) in voList" :key="index" @click="setClick(index)">
					<view class="listTit">{{ item.name }}</view>
					<view class="listNode">
						<my-icon name="wrongNum"></my-icon>
						{{ item.countStr }}：{{ item.queCou }}
					</view>
				</view>
			</template>

			<!-- <my-empty v-if="!list[current].voList" emptyTit="暂无记录"></my-empty> -->
		</view>
		<my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit(0)" confirm-text="确定" cancel-text="取消">
			<view class="subModal">
				<view class="subModalNode">《{{ choseInfo.name }}》</view>
				<view class="subModalTit">
					确定设置为
					<view>{{ startTime }}的打卡任务吗?</view>
				</view>
			</view>
		</my-confirm>
		<my-confirm ref="surModal" @cancel="backCancel()" @confirm="backSubmit(1)" confirm-text="确定" cancel-text="取消">
			<view class="subModal">
				<view class="subModalNode">《{{ choseInfo.name }}》</view>
				<view class="subModalTit">
					当前日期已有打卡任务
					<view>确定要覆盖吗?</view>
				</view>
			</view>
		</my-confirm>
		<u-picker mode="time" :start-year="curYear" :default-time="startTime" @confirm="confirm" v-model="startShow" :params="params"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			startShow: false, //年月日时间
			startTime: '选择时间', //开始时间
			params: {
				//年月日显示
				year: true,
				month: true,
				day: true
			},
			current: 0,
			list: [],
			voList: [],
			isSet: true,
			choseInfo: {}, //选中的题目信息
			emptyFlase: false, //为空
			choseStu: uni.getStorageSync('clockStorage').className,
			getDataStuId:[],//选择的学生
		};
	},
	onLoad() {
		let dateTime = new Date().setDate(new Date().getDate()); //天数加1
		this.startTime = uni.getStorageSync('clockTime')?uni.getStorageSync('clockTime'):this.$u.timeFormat(dateTime, 'yyyy-mm-dd');
		this.getStudent();
		this.init();
	},
	computed: {
		curYear() {
			return this.startTime.substring(0, 4);
		}
	},
	watch: {
		voList() {
			this.emptyFlase = this.voList.length > 0 ? false : true;
		}
	},
	methods: {
		init() {
			this.list = [];
			this.current = 0;
			this.choseInfo = {};
			return this.getData();
		},
		// 开始时间
		pickerChose() {
			this.startShow = true;
		},
		//选择学生
		stuChose() {
			uni.setStorageSync('clockTime', this.startTime)
			uni.navigateTo({
				url: 'clockSelectStudent?type=0'
			});
		},
		confirm(e) {
			// 确定年月日
			this.startShow = false;
			this.hourShow = true;
			const choseTime = e.year + '-' + e.month + '-' + e.day;
			this.startTime = choseTime;
			const getData = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			// 时间对比判断
			if (this.dateCompare(this.startTime, getData)) {
				this.startTime = '选择时间';
				uni.showToast({
					duration: 2000,
					title: '开始时间应晚于当前时间！',
					icon: 'none'
				});
			}
		},
		dateCompare(startDate, endDate) {
			// 计算截止时间
			startDate = parseInt(startDate.replace('-', '').replace('-', ''));
			// 计算详细项的截止时间 打开日期从明天开始
			endDate = parseInt(endDate.replace('-', '').replace('-', '')) ;
			if (startDate < endDate) {
				return true;
			} else {
				return false;
			}
		},
		getStudent() {
			return new Promise((resolve, reject) => {
				this.request.get('/app/teacher/notice/getStudent').then(res => {
					let dataArr=res.filter(item=>item.stuList.length>0)
					let className=[]
					let stuId=[]
					if(!uni.getStorageSync('clockStorage').className){
						for(let i=0;i<dataArr.length;i++){
							className.push(dataArr[i].organizeName)
							for(let j=0;j<dataArr[i].stuList.length;j++){
								this.getDataStuId.push(dataArr[i].stuList[j].userid)
							}
						}
						this.choseStu=className?className.join(','):[]
					}
					resolve();
				});
			});
		},
		getData() {
			return new Promise((resolve, reject) => {
				this.request.get('/app/teacher/home/checkClockList').then(res => {
					this.list = res;
					this.voList = res[this.current].voList;
					resolve();
				});
			});
		},
		change(e) {
			// tab点击
			this.current = e;
			this.voList = this.list[this.current].voList;
		},
		// 选中题目
		setClick(index) {
			this.choseInfo = this.list[this.current].voList[index];
			this.$nextTick(function() {
				this.$refs.headBack.open();
			});
		},
		// 取消
		backCancel() {
			this.$nextTick(function() {
				this.$refs.headBack.close();
				// this.$refs.surModal.close();
			});
		},
		// 返回
		goBack(){
			uni.redirectTo({
				url:'./clockManagement'
			})
		},
		//确认设置
		backSubmit(type) {
			var userIdList=[]
			if(uni.getStorageSync('clockStorage').classChoseStu){
			  userIdList=uni.getStorageSync('clockStorage').classChoseStu
			}else{
				userIdList=this.getDataStuId
			}
	
			if(userIdList.length==0){
				uni.showToast({
					icon: 'none',
					title: '请选择班级！'
				});
				this.backCancel();
				return
			}
			const pageData = {
				userIdList:userIdList,
				relateId: this.choseInfo.id,
				relateType: this.list[this.current].relateType, 
				relateName: this.choseInfo.name,
				taskDate: this.startTime,
				type: type
			};
			this.backCancel();
			return new Promise((resolve, reject) => {
				this.request.post('/app/teacher/home/checkClock', pageData).then(res => {
					if (res.code == 0) {
						// 成功
						this.backCancel();
						uni.redirectTo({
							url: 'clockManagement'
						});
					} 
					// else {
					// 	// 已有打卡
					// 	this.$nextTick(function() {
					// 		this.$refs.surModal.open();
					// 	});
					// }
					resolve();
				});
			});
		}
	}
};
</script>

<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
	.assCon{
		padding-bottom: 40upx;
	}
	.u-title {
		text-align: center;
		font-size: 32upx;
	}
	.u-navbar {
		line-height: 44px;
		padding-top: 60upx;
		position: fixed;
		width: 100%;
		z-index: 999;
	}
	.u-navbar-content-title {
		position: relative;
		color: #fff;
	}
	.u-back-icon {
		position: absolute;
		padding: 0 30upx;
		z-index: 10;
		color: #fff;
	}
.empty {
	height: 58%;
	top: auto;
	bottom: 0;
}
.clockCon {
	padding: 140upx 30upx 50upx;
}
.clockWarn {
	padding-left: 29upx;
	color: #a6a6a6;
	font-size: 26upx;
	height: 80upx;
	line-height: 80upx;
}
.subModalNode {
	color: #a6a6a6;
	font-size: 28upx;
}
.subModalTit {
	font-size: 34upx;
	margin-top: 30upx;
	line-height: 60upx;
}
.choseStuName {
	overflow: hidden;
	width: 300upx;
	height: 55px;
	line-height: 55px;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block!important;
	text-align: right;
	position: relative;
	padding-right: 40upx;
	.icon-bd-next{
		position: absolute;
		right: 0;
		top: 0;
	}
}
.clockTop {
	background: #fff;
	border-radius: 18upx;
	box-shadow: 0px 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
	.clockTopLi {
		height: 110upx;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		view {
			color: #363940;
			display: flex;
			justify-content: end;
			align-items: center;
			font-size: 32upx;
		}
		text {
			font-size: 32upx;
			color: #363940;
		}
		.iconfont {
			color: #cccccc;
			font-size: 28upx;
			margin-left: 20upx;
		}
	}
}
.listTit {
	color: #363940;
	font-size: 32upx;
	height: 35upx;
	line-height: 35upx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.listNode {
	color: #a6a6a6;
	font-size: 28upx;
	display: flex;
	justify-content: start;
	margin-top: 20upx;
	.iconfont {
		margin-right: 16upx;
	}
}
.clockList {
	background: #fff;
	height: 160upx;
	padding: 40upx;
	border-radius: 18upx;
	box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
	margin-top: 20upx;
}
/deep/.u-tabs {
	margin-top: 30upx;
	.u-tab-bar {
		border-radius: 100upx;
		background: linear-gradient(to right, #fc7767, #ec412f) !important;
	}
}
/deep/.uni-popup {
	z-index: 981;
}
.place {
	color: #a6a6a6 !important;
}
</style>
